<template>
	<navbar :title="text" :isBack="true"></navbar>
	<view>
		<view class="card">
			<view class="form">
				<view class="label">收货人</view>
				<view class="content">
					<input v-model="form.name" placeholder="请输入" placeholder-class="inputplace" class="input" />
				</view>
				<view class="formicon"></view>
			</view>
			<view class="form">
				<view class="label">联系电话</view>
				<view class="content">
					<input v-model="form.mobile" type="number" maxlength="11" placeholder="请输入"
						placeholder-class="inputplace" class="input" />
				</view>
				<view class="formicon"></view>
			</view>
			<view class="form">
				<view class="label">所在地址</view>
				<view class="content" @tap="openaddr()">
					<view class="inputplace formpick" v-if="!form.province">请选择省、市、区、街道</view>
					<view class="formpick" v-else>{{form.province}}{{form.city}}{{form.area}}</view>
				</view>
				<image src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/0fx/user/address/zuojiantou%403x.png"
					mode="widthFix" class="formicon"></image>
			</view>
			<view class="form noborder">
				<view class="label">详细地址</view>
				<view class="content">
					<input v-model="form.address" placeholder="请输入小区楼栋" placeholder-class="inputplace" class="input" />
				</view>
				<view class="formicon"></view>
			</view>
		</view>
		<view class="card">
			<view class="form noborder" @tap="setDetault">
				<view class="content">设为默认收货地址</view>
				<image v-if="form.is_default" style="width:40rpx;height:40rpx"
					src="../../static/goods/default-active.png"></image>
				<image v-else style="width:40rpx;height:40rpx" src="../../static/goods/default.png"></image>
			</view>
		</view>
		<view class="btns" @tap="submit()">保存</view>
		<w-picker mode="region" :defaultVal="pca" :hideArea="false" @confirm="onConfiraddr" ref="regionaddr"
			:timeout="true"></w-picker>
	</view>
</template>

<script setup lang="ts">
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { ref, reactive, computed } from 'vue'
	import { cityIndex, details } from '@/service/api/city'
	import tools from '@/utils/tools'
	import wPicker from '@/components/w-picker/w-picker.vue'
	const form = reactive({
		name: "",
		mobile: "",
		province: "",
		city: "",
		area: "",
		is_default: true,
		address: ""
	})
	const id = ref('')
	const text = computed({
		get: () => {
			if (id.value) {
				return '修改收货地址'
			}
			return '添加收货地址'
		},
		set: () => {

		}
	})
	onLoad((opt) => {
		if (opt.id) {
			id.value = opt.id;
		}
	})
	const pca = ref([])
	const regionaddr = ref(null)
	const openaddr = () => {
		regionaddr.value.show()
	}
	const onConfiraddr = (v) => {
		form.province = v.checkArr[0];
		form.city = v.checkArr[1];
		form.area = v.checkArr[2];
		console.log(v);
	}
	//设置默认地址
	const setDetault = () => {
		form.is_default = !form.is_default
	}
</script>

<style scoped lang="scss">
	.inputplace {
		color: #808080;
	}

	.card {
		margin: 30upx;
		padding: 0 30upx;
		border-radius: 20upx;
		background-color: #ffffff;
		font-size: 28upx;

		.form {
			padding: 30upx 0;
			border-bottom: 1upx solid #f1f1f1;
			display: flex;
			align-items: center;

			.label {
				width: 112rpx;
			}

			.content {
				flex: 1;
				display: flex;

				.input {
					flex: 1;
					text-align: left;
					font-size: 28upx;
					margin-left: 60rpx;
				}

				.formpick {
					width: 100%;
					text-align: left;
					margin-left: 60rpx;
				}
			}

			.formicon {
				display: block;
				width: 12upx;
				margin-left: 20upx;
			}

			.formdefalt {
				display: block;
				width: 36rpx;
				height: 36rpx;
				border-radius: 10upx;
			}

			.formdefaltno {
				box-sizing: border-box;
				border: 1upx solid #cccccc;
			}
		}

		.noborder {
			border: none;
		}
	}

	.btns {
		width: 690upx;
		height: 90upx;
		text-align: center;
		line-height: 90upx;
		background: linear-gradient(90deg, #5062A7 0%, #354678 100%);
		border-radius: 10upx;
		color: white;
		margin: 30upx;
	}
</style>
<style>
	page {
		background: #F5F6F8
	}
</style>